<style>
.login-code-input {
    width: 60%!important;
}
</style>
<template>
    <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
        <Form-item label="手机号" prop="loginName">
            <Input type="text" v-model="formCustom.loginName"></Input>
        </Form-item>
        <Form-item label="验证码" prop="loginCode">
            <Input class="login-code-input" type="text" v-model="formCustom.loginCode" number></Input>
            <Button type="primary" @click="handleCode('formCustom')" style="margin-left: 8px">获取验证码</Button>
        </Form-item>
        <Form-item>
            <Button type="primary" @click="handleSubmit('formCustom')">提交</Button>
        </Form-item>
    </Form>
</template>
<script>
export default {
    data() {
        const validateloginName = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入手机号'));
            } else {
                callback();
            }
        };
        const validateCode = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('验证码不能为空'));
            } else {
                callback();
            }
        };

        return {
            formCustom: {
                loginName: '',
                loginCode: ''
            },
            ruleCustom: {
                loginName: [
                    { validator: validateloginName, trigger: 'blur' }
                ],
                loginCode: [
                    { validator: validateCode, trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        R_GET: function(url, params) {
            if (params) {
                let paramsArray = []
                Object.keys(params).forEach(key => paramsArray.push(key + '=' + encodeURIComponent(params[key])))
                if (url.search(/\?/) === -1) {
                    url += '?' + paramsArray.join('&')

                } else {
                    url += '&' + paramsArray.join('&')
                }
            }

            return new Promise(function(resolve, reject) {
                fetch(url,{
                     method: 'POST'
                })
                    .then((response) => {

                        if (response.ok) {
                            return response.json()

                        } else {
                            reject('服务器繁忙，请稍后再试；\r\nCode:' + response.status)
                        }
                    })
                    .then((response) => {
                        if (response && response.status) {
                            resolve(response) //response.status 是与服务器端的约定，非0就是错误
                        } else {
                            reject(response) //response也是与服务器端的约定
                        }
                    })
                    .catch((err) => {
                        reject(_parseErrorMsg(err))
                    })
            })
        },
        handleSubmit(name) {
            var that=this
            this.$refs[name].validate((valid) => {
                if (valid) {
                    that.R_GET('/phone/login/new',that.formCustom).then(function(response) {
                            console.log(response);
                            localStorage.setItem('login',response)
                        })
                        .catch(function(response) {
                            console.log(response);
                        });
                    this.$Message.success('提交成功!');
                } else {
                    this.$Message.error('表单验证失败!');
                }
            })
        },
        handleCode() {
            var that = this
            this.R_GET('/code/phone/login', { "Phone": that.formCustom.loginName }).then(function(response) {
                    console.log(response);
                })
                .catch(function(response) {
                    console.log(response);
                });
            // this.$http.post('/code/phone/login?Phone=' + that.formCustom.phone).then(function(response) {
            //         console.log(response);
            //     })
            //     .catch(function(response) {
            //         console.log(response);
            //     });

        },
        handleReset(name) {
            this.$refs[name].resetFields();
        }
    }
}
</script>